<template>
    <div class="settings-page">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="设置" left-arrow @click-left="$router.back()" fixed placeholder />
        <!-- 功能列表 -->
        <div class="user-body">
            <van-cell-group class="menu-group">
                <van-cell title="更换手机号" icon="phone" is-link @click="" />
                <van-cell title="注销账户" icon="delete" is-link @click="deleteAccount" />
            </van-cell-group>
        </div>

        <div class="user-body">
            <van-cell-group class="menu-group">
                <van-cell title="关于万师傅" icon="location" is-link @click="" />
                <van-cell title="服务协议" icon="description" is-link @click="" />
                <van-cell title="资质证照" icon="description" is-link @click="" />
            </van-cell-group>
        </div>
        <!-- 角色选择区域 -->
        <div class="user-body">
            <van-cell-group class="menu-group">
                <van-cell title="通知开启" icon="bell" is-link @click="" value="已开启">
                    <template #label>
                        <span class="notification-label">开启后可及时接收师傅服务进度，订单通知</span>
                    </template>
                </van-cell>
                <van-cell title="清理缓存" icon="delete" is-link @click="" value="" />
                <van-cell title="当前版本" icon="shop" is-link @click="" value="" />
            </van-cell-group>
        </div>
        <!-- ICP备案信息 -->
        <div class="icp-info">
            ICP备案号：粤ICP备14009356号-9A
        </div>

        <!-- 退出登录按钮 -->
        <div class="logout-section">
            <van-button class="logout-btn" round block type="default" @click="handleLogout">
                退出登录
            </van-button>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { showToast, showConfirmDialog} from 'vant'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { deleteAccountAPI } from '@/api'

const userStore = useUserStore();
const router=useRouter();

// 退出登录
const handleLogout = () => {
    showConfirmDialog({
        title: '退出登录',
        message: '确定要退出登录吗？',
    }).then(() => {
        // 清除用户信息
        userStore.clearUserInfo();
        showToast('已退出登录');
        // 可以跳转到首页或其他页面
         router.push('/home');
    }).catch(() => {
        // 取消退出
    });
}

// 注销账户
const deleteAccount = async () => {
    // 确认对话框
    showConfirmDialog({
        title: '注销账户',
        message: '确定要注销账户吗？此操作不可撤销！',
    })
    .then(async () => {
        // 用户确认注销
        showLoadingToast({
            message: '注销中...',
            forbidClick: true,
        });
        
        try {
            const userId = userStore.id;
            await deleteAccountAPI(userId);
            
            closeToast();
            userStore.clearUserInfo();
            showToast('账户已成功注销');
            router.push('/home');
            
        } catch (error) {
            closeToast();
            console.error('注销失败:', error);
            showToast('注销失败，请重试');
        }
    })
    .catch(() => {
        // 用户取消操作，这里不需要做任何处理
        console.log('用户取消注销');
    });
};
</script>

<style scoped>
.settings-page{
        width: 100%;
    padding-bottom: 50px;
    min-height: 100vh;
    background-color: #F7F7F7;
}
.user-body {
    margin: 0 16px 16px 16px;
    background: #fff;
    border-radius: 1px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.icp-info {
    text-align: center;
    color: #969799;
    font-size: 12px;
    margin: 20px 0;
}

.logout-section {
    padding: 0 16px;
}

.notification-label {
    white-space: nowrap;
    font-size: 10px;
}

.logout-btn {
    margin-top: 20px;
}
</style>